<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            font: 18px "Microsoft YaHei UI";
            margin: 0;
            background-color: #fafafa;
        }

        header #d1:hover {

        }

        li {
            list-style: none;
        }

        /* body{
             width: 1029px;
             height: 2454px;
             font: 12px "simhei", Arial, Helvetica, sans-serif;
             color: #000000;
             background-color: #dbdde0;
             margin: 0 auto;
         }*/
        * {
            margin: 0;
            padding: 0;
        }

        img {
            margin-left: 80px;
            margin-bottom: 25px;
        }

        #主页面 {
            width: 840px;
            height: 1747px;
            margin: 0 auto;
            color: #000;
            background-color: #FFFFFF;
            padding-bottom: 45px;
            margin-top: 50px;


        }

        #主页面 > #文章 > #文章1 {
            width: 760px;
            background-color: #fff;
            padding: 40px 0;
            position: relative;
            margin: 0 80px;

        }

        #主页面 > #文章 > #文章1 > #题目 {
            width: 670px;
            height: 70px;
            color: #333333;
            font: 30px -apple-system-font, "Microsoft YaHei", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", sans-serif;
            line-height: 50px;
            font-weight: 400;
            margin-bottom: -10px;
        }

        #主页面 > #标签 {
            margin-left: 80px;
            margin-top: 20px;
            width: 670px;
            height: 26px;
            color: #AEAEAE;
        }

        #主页面 > #标签1 {
            margin-left: 80px;
            margin-top: 20px;
            width: 670px;
            height: 26px;
            color: #AEAEAE;
        }

        #主页面 > #标签1 > #基础地理 {
            color: red;
            text-decoration: none;
        }

        #主页面 > #分割线 {
            width: 670px;
            height: 1px;
            margin: 30px 0;
            margin-left: 80px;
        }

        #主页面 > #编者按 {
            width: 670px;
            height: 26px;
            color: #333333;
            margin-left: 80px;

        }

        #主页面 > #正文 {
            width: 670px;
            height: 52px;
            color: #333333;
            font-size: 20px;
            margin-left: 80px;

        }

        #主页面 > #景色图片 {
            width: 670px;
            height: 446px;
            margin-left: 80px;
            margin-top: 40px;
        }

        #主页面 > #正文2 {
            width: 670px;
            height: 78px;
            color: #78111b;
            margin-left: 80px;
            margin-bottom: 40px;
            font-size: 20px;
        }

        #主页面 > #分割线1 {
            width: 670px;
            height: 1px;
            margin-left: 80px;
            margin-top: 100px;
            margin-bottom: 30px;
        }

        #主页面 > #杂志 {
            width: 670px;
            height: 26px;
            color: #333333;
            margin: 10px 0 10px 80px;
            font-size: 15px;

        }

        #主页面 > #广告 {
            width: 450px;
            height: 300px;
            margin-left: 200px;

        }

        #主页面 > #链接 {
            color: red;
            text-decoration: none;
            margin-left: 240px;
        }

        #主页面 > #版权声明 {
            margin-left: 80px;
            margin-top: 50px;
        }

        #主页面 > #正文3 {
            margin-left: 80px;
            font-size: 15px;
            margin-top: 20px;

        }

        #主页面 > #正文4 {
            margin-left: 80px;
            font-size: 15px;

        }

        #主页面 > #分割线2 {
            width: 670px;
            height: 1px;
            margin-left: 80px;
            margin-top: 100px;
            margin-bottom: 30px;
        }

        #主页面 > #最后一行 {
            margin-left: 300px;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div style="width: 100%;margin: 0 auto ;background-color: #333333">
                <div style="width:1200px;height:63px;margin:0 auto; position: relative ;">
                    <img src="http://www.dili360.com/public/images/logo-top.png"
                         style="width: 180px;height: 63px;vertical-align: middle;">
                    <el-input
                            style="width: 285px;height: 30px;padding: 1px 30px 1px 10px;position:absolute;margin-left: 600px ;margin-top: 5px "
                            placeholder="请输入搜索内容"
                            suffix-icon=" el-icon-search"
                            v-model="input1">

                    </el-input>

                </div>

            </div>
            <!--蓝条开始-->
            <div style="width: 100%;height:60px;background-color: #222222;position: relative">
                <div style="width:1040px;height:63px;margin:0 auto;">
                    <el-menu style="width: 1040px;margin: 0 auto; float: left; background-color: #222222"
                             default-active="1"
                             class="el-menu-demo"
                             mode="horizontal"
                             @select="handleSelect"
                             background-color="#222222"
                             text-color="#fff"
                             active-text-color="#666">
                        <el-menu-item id="d1" index="1"
                                      style="border-right:1px solid gainsboro ;background-color: #333333 ">首页
                        </el-menu-item>
                        <el-menu-item id="d2" index="2"
                                      style="border-right:1px solid gainsboro;background-color: #333333 ">景观
                        </el-menu-item>
                        <el-menu-item id="d3" index="3"
                                      style="border-right:1px solid gainsboro;background-color: #333333">谈资
                        </el-menu-item>
                        <el-menu-item id="d4" index="4"
                                      style="border-right:1px solid gainsboro ;background-color: #333333">作者
                        </el-menu-item>
                        <el-menu-item id="d5" index="5"
                                      style="border-right:1px solid gainsboro ;background-color: #333333">大讲堂
                        </el-menu-item>
                        <el-menu-item id="d6" index="6"
                                      style="border-right:1px solid gainsboro ;background-color: #333333">活动
                        </el-menu-item>
                        <el-menu-item id="d7" index="7"
                                      style="border-right:1px solid gainsboro ;background-color: #333333">商城
                        </el-menu-item>
                        <p id="d11" index="9" style="float: right;margin-top: 20px ;font-size: 5px;margin-right: 5px;color: #AAAAAA"><a href="">快速登录</a></p>
                        <p id="d10" index="9" style="float: right; margin-top: 20px ;font-size: 5px ;margin-right: 5px; color:#AAAAAA;"><a href="">登录</a>/<a href="">注册</a></p>

                        <el-menu-item id="d8" index="8" style="float: right">app</el-menu-item>
                        <el-menu-item id="d9" index="9" style="float: right">投稿</el-menu-item>



                    </el-menu>
                </div>
            </div>
        </el-header>
        <el-main>

            <div id="主页面">

                <div id="文章">
                    <article id="文章1">
                        <h1 id="题目">湖泊湿地大道 “湿”情画意延万里 如珠如翠缀国道</h1>
                    </article>
                </div>
                <div id="标签">文章出自：中国国家地理 <small><a>2021年第10期</a></small></div>
                <p id="标签1">标签:<a href="" id="基础地理">基础地理</a></p>
                <hr id="分割线">
                <h2 id="编者按">编者按:</h2>
                <div id="正文">&nbsp;&nbsp;&nbsp;全长超过一万公里的219国道，不仅人文历史深厚，更堪称是一条顶级地理美景的“索引之路”。这其中，有冰川、雪山、峡谷、喀斯特，而格外引人注目的，则是沿途及周边如珠如翠的大小湖泊及连绵湿地。</div>
                <img src="http://img0.dili360.com/pic/2021/10/15/6169337499ef33e37607507_t.jpg@!rw9" alt="" id="景色图片">
                <!-- <hr style="border:1px dotted #036" />-->
                <div id="正文2">
                    慕士塔格峰的冰雪融水滋润了翠玉般的喀拉库勒湖及湖畔绿丝绒般的湿地，远处气势磅礴的雪峰则是公格尔九别峰。在西藏和新疆，219国道主线、支线及周边的湖泊湿地，大多有着与雪峰冰川密切相关的“身世”。要抵达喀拉库勒湖，除了219国道外，还要“嫁接”一段314国道，才能收获这“一线湖景”。摄影／王宁
                </div>
                <hr id="分割线1">
                <p id="杂志">&nbsp;&nbsp;&nbsp;它们类型众多、美感各异、色彩缤纷，演绎着不同的“湿情画意”——</p>
                <img id="广告" src="http://www.dili360.com/public/images/wechat.jpg" alt="">
                <a href="" id="链接">>>> 阅读更多内容，请使用中国国家地理畅读·微信小程序 <<<</a>
                <h2 id="版权声明">版权声明</h2>
                <div id="正文3">凡中国国家地理网刊登内容，未经授权许可，任何媒体和个人不得转载、链接、转贴或以其它方式使用。</div>
                <div id="正文4">&nbsp;&nbsp;已经本网书面授权的，在使用时必须注明来源。违反上述声明的，本网将追究其相关法律责任。</div>
                <hr id="分割线2">
                <div id="最后一行">要评论？请先 <a href="">登录</a>或者<a href="">注册</a></div>
            </div>
        </el-main>
        <el-footer>
            <div style="width: 100%;height: 400px;background-color: #333333;padding: 28px 0px 20px">
                <div style="width: 1400px;height: 200px ;background-color: #333333; margin: 0 auto;">
                    <div style="width: 222px;height: 127px ;float: left;color: gainsboro;margin-left: 150px">
                        <h5 style="width: 222px;height: 20px;padding: 0 0 0 12px;margin: 0 0 10px 20px; ">杂志</h5>
                        <ul style="border-left:1px solid white">
                            <li><a href=""
                                   style="color: black; font-size: 5px ;text-decoration: none;margin-bottom: 20px;margin-left: 20px">中国国家地理</a>
                            </li>
                            <li><a href=""
                                   style="color: black; font-size: 5px ;text-decoration: none;margin-bottom: 20px;margin-left: 20px">中华遗址</a>
                            </li>
                            <li><a href=""
                                   style="color: black; font-size: 5px ;text-decoration: none;margin-bottom: 20px;margin-left: 20px">博物</a>
                            </li>
                            <li><a href=""
                                   style="color: black; font-size: 5px ;text-decoration: none;margin-bottom: 20px;margin-left: 20px">杂志订阅</a>
                            </li>


                        </ul>


                    </div>
                    <div style="width: 222px;height: 127px ;float: left;color: gainsboro">
                        <h5 style="width: 222px;height: 20px;padding: 0 0 0 12px;margin: 0 0 10px 20px; ">新媒体</h5>
                        <ul style="border-left:1px solid white">
                            <li><a href=""
                                   style="color: black; font-size: 5px ;text-decoration: none;margin-bottom: 20px;margin-left: 20px">中国国家地理网</a>
                            </li>
                            <li><a href=""
                                   style="color: black; font-size: 5px ;text-decoration: none;margin-bottom: 20px;margin-left: 20px">中国国家地理官方客户端</a>
                            </li>
                            <li><a href=""
                                   style="color: black; font-size: 5px ;text-decoration: none;margin-bottom: 20px;margin-left: 20px">官方微信</a>
                            </li>
                            <li><a href=""
                                   style="color: black; font-size: 5px ;text-decoration: none;margin-bottom: 20px;margin-left: 20px">官方微博</a>
                            </li>


                        </ul>

                    </div>
                    <div style="width: 222px;height: 127px ;float: left;color: gainsboro">
                        <h5 style="width: 222px;height: 20px;padding: 0 0 0 12px;margin: 0 0 10px 20px; ">广告合作</h5>
                        <ul style="border-left:1px solid white">
                            <li><a href=""
                                   style="color: black; font-size: 5px ;text-decoration: none;margin-bottom: 20px;margin-left: 20px">杂志广告刊例</a>
                            </li>

                        </ul>

                    </div>
                    <div style="width: 222px;height: 127px ;float: left;color: gainsboro">
                        <h5 style="width: 222px;height: 20px;padding: 0 0 0 12px;margin: 0 0 10px 20px; ">关于我们</h5>
                        <ul style="border-left:1px solid white">
                            <li><a href=""
                                   style="color: black; font-size: 5px ;text-decoration: none;margin-bottom: 20px;margin-left: 20px">成长记忆</a>
                            </li>
                            <li><a href=""
                                   style="color: black; font-size: 5px ;text-decoration: none;margin-bottom: 20px;margin-left: 20px">联系我们</a>
                            </li>
                            <li><a href=""
                                   style="color: black; font-size: 5px ;text-decoration: none;margin-bottom: 20px;margin-left: 20px">工作机会</a>
                            </li>

                        </ul>

                    </div>
                    <div style="width: 222px;height: 127px ;float: left;color: gainsboro">
                        <h5 style="width: 222px;height: 20px;padding: 0 0 0 12px;margin: 0 0 10px 20px; ">关于网站</h5>
                        <ul style="border-left:1px solid white">
                            <li><a href=""
                                   style="color: black; font-size: 5px ;text-decoration: none;margin-bottom: 20px;margin-left: 20px">版权声明</a>
                            </li>
                            <li><a href=""
                                   style="color: black; font-size: 5px ;text-decoration: none;margin-bottom: 20px;margin-left: 20px">隐私条例</a>
                            </li>
                            <li><a href=""
                                   style="color: black; font-size: 5px ;text-decoration: none;margin-bottom: 20px;margin-left: 20px">常见反馈</a>
                            </li>
                            <li><a href=""
                                   style="color: black; font-size: 5px ;text-decoration: none;margin-bottom: 20px;margin-left: 20px">合作伙伴</a>
                            </li>
                            <li><a href=""
                                   style="color: black; font-size: 5px ;text-decoration: none;margin-bottom: 20px;margin-left: 20px">友情链接</a>
                            </li>

                        </ul>

                    </div>


                </div>
                <div style="width: 1300px;height: 145px ;background-color: #333333; margin: 0 auto; ">
                    <img src="	http://www.dili360.com/public/images/loglo-footer.jpg" alt=""
                         style="width: 180px;height: 56px">
                    <img src="	http://www.dili360.com/public/images/cng-dingyue.png" alt=""
                         style="width: 95px;height: 95px;">
                    <img src="	http://www.dili360.com/public/images/cng-fuwu.png" alt=""
                         style="width: 95px;height: 95px">
                </div>
                <div style="background-color: #3f3f3f;padding: 30px;
                     text-align: center;color: #b1b1b1;font-size: 14px;height: 100px">
                    <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
                    <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
                    <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
                    <h2>技术支持:张家铭</h2>
                </div>

            </div>
        </el-footer>

    </el-container>

</div>
</body>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                wd: "",
                input1: '',
                arr: ["imgs/b1.jpg", "imgs/b2.jpg", "imgs/b3.jpg", "imgs/b4.jpg"],

            }
        }, methods: {
            handleSelect() {

            }
        }
    })
</script>
</html>